{% extends 'navigation.html' %}
{% load static %}
{% block title %}
    <title>资讯</title>
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-4.6.1-dist/css/bootstrap.css' %}">
    {#    多行文本溢出部分隐藏,只能用于webkit浏览器引擎#}
    <style>
        p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container clearfix">
        <h1>资讯</h1>
        <br>
        <div class="row">
            <!-- 左边文章 -->
            <div class="col-sm-9 some-list">
                {% for article in Article_list %}
                    <div class="card item" style="max-height: 160px">
                        <div class="card-body">
                            <a href="/articlelist/{{ article.id }}/content" class="text-dark">{{ article.title }}</a>
                            <p class="text-muted">{{ article.desc }}</p>
                            <span class="text-left"><small>#{{ article.category }}</small></span>
                            <p class="text-right"><small>{{ article.create_time }}</small></p>
                            <br>
                        </div>
                    </div>
                {% endfor %}
            <br>
            </div>
            <!-- 右边文章 -->
            <div class="card col-sm-3 " style="width: 18rem; max-height: 320px">
                <div class="card-body">
                    <h5 class="card-title">最新推荐</h5>
                    {% for Recommended_article in article %}
                        <a href="/articlelist/{{ Recommended_article.id }}/content" class="text-dark">{{ Recommended_article.title }}</a><br>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-4.6.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/jquery.simpleLoadMore.js' %}"></script>
    <script>
        $('.some-list').simpleLoadMore({
            item: 'div.item',
            count: 5
        });
    </script>
{% endblock %}